<template>
  <div class="login-container">
    <van-nav-bar
      title="登陆"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />

    <van-cell-group>
      <div class="van-cell van-cell--required van-hairline van-field" :class="{'van-cell--center van-field--error': errors.has('account')}">
        <div class="van-cell__title"><span>用户名</span></div>
        <div class="van-cell__value">
          <input v-model="fromField.account" v-validate="'required|min:6'" name="account" type="text" placeholder="请输入用户名" class="van-field__control">
          <div v-if="errors.has('account')" class="van-field__error-message">{{ errors.first('account') }}</div>
        </div>
      </div>

      <div class="van-cell van-cell--required van-hairline van-field" :class="{'van-cell--center van-field--error': errors.has('password')}">
        <div class="van-cell__title"><span>密码</span></div>
        <div class="van-cell__value">
          <input v-model="fromField.password" v-validate="'required|min:6'" name="password" type="password" placeholder="请输入密码" class="van-field__control">
          <div v-if="errors.has('password')" class="van-field__error-message">{{ errors.first('password') }}</div>
        </div>
      </div>

      <div class="van-cell van-cell--required van-hairline van-field" :class="{'van-cell--center van-field--error': errors.has('captcha')}">
        <div class="van-cell__title"><span>验证码</span></div>
        <div class="van-cell__value">
          <input v-model="fromField.captcha" v-validate="'required|min:4'" name="captcha" type="text" placeholder="请输入验证码" class="van-field__control">
          <div v-if="errors.has('captcha')" class="van-field__error-message">{{ errors.first('captcha') }}</div>
        </div>
        <div class="van-field__button" @click="onClickCaptcha"><img style="width: 80px" :src="captchaImg" alt="captcha"></div>
      </div>

      <van-button size="large" type="primary" @click="onSubmit">登陆</van-button>

      <div class="van-cell"><router-link class="van-cell__value" :to="{name:'forgetPassword'}">忘记密码</router-link></div>
    </van-cell-group>
  </div>
</template>

<script>
import qs from 'qs';
import { NavBar, Field, CellGroup, Button, Toast } from 'vant';
import auth from '../../utils/auth';
import ajaxVant from '../../utils/ajaxVant';
import config from '../../config';

export default {
  data() {
    return {
      fromField: {
        account: '',
        password: '',
        captcha: ''
      },
      captchaImg: config.ajaxApi + '/captcha'
    };
  },
  components: {
    [NavBar.name]: NavBar,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button
  },
  methods: {
    onClickCaptcha(e) {
      e.preventDefault();
      this.captchaImg = config.ajaxApi + '/captcha?d=' + (new Date()).getTime();
    },
    onSubmit() {
      var _this = this;
      this.$validator.validateAll().then((result) => {
        if (result) {
          ajaxVant.post('/login', qs.stringify(_this.fromField)).then(function(data) {
            if (data !== false) {
              auth.removeToken();
              auth.setToken(data.token);

              Toast(data.msg);

              setTimeout(() => {
                Toast.clear();
                _this.$router.push({ name: 'user' });
              }, 1000);
            }
          });
        }
      }).catch((err) => {
        console.log(err);
      });
    }
  }
};

</script>
